import React, { useState } from 'react'
import { View, Input, Text, Picker } from '@tarojs/components'
const index = (props) => {
  const { data = {}, index, ChangeValue } = props
  const {
    title,
    label,
    require = false,
    desc,
    value = '',
    option = [],
  } = data
  const [visible, setVisible] = useState(false)
  return <View className='CollectWps_box_content'>
    <View className='CollectWps_label'>{require && <Text style={{ color: "red", right: 4 }}>*</Text>}{label}</View>
    <View className='CollectWps_desc'>{desc}</View>

    <Picker
      onChange={(e) => {
        ChangeValue({
          index,
          value: {
            value: option[e.detail.value].label
          }
        })

      }}
      onClose={() => { setVisible(false) }}
      value={value}
      rangeKey={'label'}
      range={option.map((item) => {
        return {
          label: item.label,
          value: item.label,
        };
      })}
    >
      <View className='CollectWps_dropdown'>
        {value ? value : '请选择'}
      </View>
    </Picker>


  </View>
}
export default index